<%@page import="com.hdoit.kylin.selfcommon.utils.RandomColor"%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<% RandomColor randomColor = new RandomColor();%>

<style type="text/css">
.panel-mid-check {
	padding: 30px;
	margin: 20px;
}

.panel-mid-check:hover {
	background: #2196F3 !important;
	color: white;
	animation: scale-color 0.2s 4 alternate	;
	-webkit-animation: scale-color 0.2s 4 alternate	;
}

@keyframes scale-color {
	from 
	{ 
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-transform: rotate(0deg);
	}
	to 
	{
		-webkit-transform: rotate(6deg);
		-moz-transform: rotate(6deg);
		-transform: rotate(6deg);
	}
}
scale-color {
	from 
	{ 
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-transform: rotate(0deg);
	}
	to 
	{
		-webkit-transform: rotate(6deg);
		-moz-transform: rotate(6deg);
		-transform: rotate(6deg);
	}
}
</style>
<div class="row">
	<table id="coolTable" class="cntable table table-bordered dataTable table-employee">
		<c:forEach var="midCheck" items="${midChecks}" varStatus="status">
			<% String color = randomColor.getRandomLightColor();%>
			<div class="col-lg-3 col-md-6">
				<div data-id="${midCheck.id }" class="panel-mid-check panel panel-flat" style="background: <%=color %>;">
					<h4>
						检查日：
						<fmt:parseDate value="${midCheck.checkDate}" pattern="yyyy-MM-dd" var="receiveDate" />
						<fmt:formatDate value="${receiveDate}" pattern="yyyy-MM-dd" />
					</h4>

					<div class="panel-body" style="margin-top: 10px;">
						<p>学生：${midCheck.studentName}</p>
						<p>检查人：${midCheck.teacherName}</p>
						<p>
							状态：
							<t:provider packageName="postgraduate" enumClassName="MidCheckState" value="${midCheck.status}" />
						</p>
					</div>
				</div>
			</div>
		</c:forEach>
		<tfoot>
			<tr>
				<th class="pager-th"><%@ include file="/WEB-INF/views/shared/master/pager.jsp"%></th>
			</tr>
		</tfoot>
	</table>
</div>